
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 导入和导出</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-导入和导出FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="导入和导出 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link current">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>导入和导出</h1>
    
    <p>可以将部分资源导出为一个资源包，也可以导入资源包。资源包可用于分享用途。</p>
<h2 id="导出资源包"><a href="#导出资源包" class="headerlink" title="导出资源包"></a>导出资源包</h2><p>在资源库里选定一个或者多个资源，也可以选定文件夹或包，然后点击主菜单“资源-&gt;导出资源包”：</p>
<p><img src="../../images/QQ20191210-140556.png" alt></p>
<p>这里列出了选定的资源以及它（们）依赖的资源，点击导出，生成一个扩展名为<code>fairypackage</code>的文件。</p>
<h2 id="导入资源包"><a href="#导入资源包" class="headerlink" title="导入资源包"></a>导入资源包</h2><p>点击主菜单“资源-&gt;导入资源”，然后按提示选择一个扩展名为<code>fairypackage</code>的文件。</p>
<p><img src="../../images/QQ20191210-141156.png" alt></p>
<p>选择导入的位置，然后点击导入，fairypackage里的资源导入得到指定的位置。</p>
<h2 id="导入内置的资源包"><a href="#导入内置的资源包" class="headerlink" title="导入内置的资源包"></a>导入内置的资源包</h2><p>FairyGUI自带了几套皮肤，点击主菜单“资源-&gt;导入内置的资源包”，然后选择其中一个包导入即可。</p>
<h2 id="从PSD中生成UI"><a href="#从PSD中生成UI" class="headerlink" title="从PSD中生成UI"></a>从PSD中生成UI</h2><p>你可以将美术制作的PSD文件导入到编辑器，直接生成UI。这个工具的名称叫psd2fgui，它是一个nodejs的应用。所以安装方式很简单，在命令行模式下运行：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">npm install -g psd2fgui</span><br></pre></td></tr></table></figure>
<p>等待安装完成即可。如果你的系统里还没有node的环境，那需要先从Node.js官网下载安装。</p>
<p>安装完成后，我们就可以直接使用psd2fgui命令了。</p>
<p>首先准备PSD文件：</p>
<p><img src="../../images/5b21addc0e1c6.png" alt></p>
<p>如上图所示，使用图层名称或组名称来表达它的类型和用途。以下是约定的细节：</p>
<ul>
<li><p>按钮 组的名称以Button开始表示这个组是一个按钮。组内的层如果名称中含有下面定义的特殊字符串（注意是包含即可，不是相同。推荐作为后缀），表示这个图层的特别含义：</p>
<ul>
<li>@up 这个图层只在按钮的up状态显示</li>
<li>@over 这个图层只在按钮的over状态显示</li>
<li>@down 这个图层只在按钮的down状态显示</li>
<li>@selectedOver 这个图层只在按钮的selectedOver状态显示</li>
<li>@title 文字用作按钮的标题</li>
<li>@icon 图片用作按钮的图标</li>
</ul>
</li>
<li><p>组件 组的名称以Com开始表示这个组是一个组件。组件可以嵌套。</p>
</li>
</ul>
<p>然后执行转换:</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">psd2fgui test.psd</span><br></pre></td></tr></table></figure>
<p>如果成功转换，输出为：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">test.psd-&gt;test.fairypackage</span><br><span class="line">buildId: mlmjpf0dc7zp</span><br></pre></td></tr></table></figure>
<p>最后使用FairyGUI编辑器，主菜单-&gt;资源-&gt;导入资源包，然后选择刚生成的test.fairypackage即可。</p>
<p>psd2fgui还提供了一些开关调整转换的细节。</p>
<ul>
<li>–nopack 不生成fairypackage。所有文件直接输出到一个文件夹中。</li>
<li>–ignore-font 不使用PSD源文件中文本指定的字体名称。文本的字体均保持空白，这样在编辑器中可以应用默认字体。</li>
<li>#buildId buildId是一个不少于12位的仅包含数字和小写字母的字符串。用于标识每次转换过程。使用相同的buildId，则多次转换后相同名称的资源的id不变。<br>例如，使用上次转换结果的buildId重新转换：<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">psd2fgui test.psd --ignore-font <span class="meta">#mlmjpf0dc7zp</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<p><strong>定制</strong><br>目前对于PSD里结构的约定，未必能符合每个人项目的需求。遇到这种情况，可以自行修改psd2fgui的源码进行定制。源码托管在<a href="https://github.com/fairygui/psd2fgui" target="_blank" rel="noopener">https://github.com/fairygui/psd2fgui</a>，记得打星支持喔。</p>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/export.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
